<template>
    <div class="addEdit-block">
        <el-form class="add-update-preview" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
            <template>
                <el-form-item class="input" v-if="type !== 'info'" label="医护工号" prop="yihugonghao">
                    <el-input v-model="ruleForm.yihugonghao" placeholder="医护工号" clearable :readonly="ro.yihugonghao"></el-input>
                </el-form-item>
                <el-form-item v-else class="input" label="医护工号" prop="yihugonghao">
                    <el-input v-model="ruleForm.yihugonghao" placeholder="医护工号" readonly></el-input>
                </el-form-item>
                <el-form-item class="input" v-if="type !== 'info'" label="密码" prop="mima">
                    <el-input v-model="ruleForm.mima" placeholder="密码" clearable :readonly="ro.mima"></el-input>
                </el-form-item>
                <el-form-item v-else class="input" label="密码" prop="mima">
                    <el-input v-model="ruleForm.mima" placeholder="密码" readonly></el-input>
                </el-form-item>
                <el-form-item class="input" v-if="type !== 'info'" label="医护姓名" prop="yihuxingming">
                    <el-input v-model="ruleForm.yihuxingming" placeholder="医护姓名" clearable :readonly="ro.yihuxingming"></el-input>
                </el-form-item>
                <el-form-item v-else class="input" label="医护姓名" prop="yihuxingming">
                    <el-input v-model="ruleForm.yihuxingming" placeholder="医护姓名" readonly></el-input>
                </el-form-item>
                <el-form-item class="select" v-if="type !== 'info'" label="医护性别" prop="yihuxingbie">
                    <el-select :disabled="ro.yihuxingbie" v-model="ruleForm.yihuxingbie" placeholder="请选择医护性别">
                        <el-option v-for="(item, index) in yihuxingbieOptions" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-else class="input" label="医护性别" prop="yihuxingbie">
                    <el-input v-model="ruleForm.yihuxingbie" placeholder="医护性别" readonly></el-input>
                </el-form-item>
                <el-form-item
                    :style="{ margin: '0 0 20px 0' }"
                    class="upload"
                    v-if="type !== 'info' && !ro.zhaopian"
                    label="照片"
                    prop="zhaopian"
                >
                    <file-upload
                        tip="点击上传照片"
                        action="file/upload"
                        :limit="3"
                        :multiple="true"
                        :fileUrls="ruleForm.zhaopian ? ruleForm.zhaopian : ''"
                        @change="zhaopianUploadChange"
                    ></file-upload>
                </el-form-item>
                <el-form-item class="upload" v-else-if="ruleForm.zhaopian" label="照片" prop="zhaopian">
                    <img
                        v-if="ruleForm.zhaopian.substring(0, 4) === 'http'"
                        class="upload-img"
                        style="margin-right: 20px"
                        :key="'http'"
                        :src="ruleForm.zhaopian.split(',')[0]"
                        width="100"
                        height="100"
                    />
                    <img
                        v-else
                        class="upload-img"
                        style="margin-right: 20px"
                        :key="index"
                        v-for="(item, index) in ruleForm.zhaopian.split(',')"
                        :src="$base.url + item"
                        width="100"
                        height="100"
                    />
                </el-form-item>
                <el-form-item class="input" v-if="type !== 'info'" label="职称" prop="zhicheng">
                    <el-input v-model="ruleForm.zhicheng" placeholder="职称" clearable :readonly="ro.zhicheng"></el-input>
                </el-form-item>
                <el-form-item v-else class="input" label="职称" prop="zhicheng">
                    <el-input v-model="ruleForm.zhicheng" placeholder="职称" readonly></el-input>
                </el-form-item>
                <el-form-item class="select" v-if="type !== 'info'" label="医护等级" prop="yihudengji">
                    <el-select :disabled="ro.yihudengji" v-model="ruleForm.yihudengji" placeholder="请选择医护等级">
                        <el-option v-for="(item, index) in yihudengjiOptions" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-else class="input" label="医护等级" prop="yihudengji">
                    <el-input v-model="ruleForm.yihudengji" placeholder="医护等级" readonly></el-input>
                </el-form-item>
                <el-form-item class="input" v-if="type !== 'info'" label="联系电话" prop="lianxidianhua">
                    <el-input v-model="ruleForm.lianxidianhua" placeholder="联系电话" clearable :readonly="ro.lianxidianhua"></el-input>
                </el-form-item>
                <el-form-item v-else class="input" label="联系电话" prop="lianxidianhua">
                    <el-input v-model="ruleForm.lianxidianhua" placeholder="联系电话" readonly></el-input>
                </el-form-item>
                <el-form-item class="input" v-if="type !== 'info'" label="身份证" prop="shenfenzheng">
                    <el-input v-model="ruleForm.shenfenzheng" placeholder="身份证" clearable :readonly="ro.shenfenzheng"></el-input>
                </el-form-item>
                <el-form-item v-else class="input" label="身份证" prop="shenfenzheng">
                    <el-input v-model="ruleForm.shenfenzheng" placeholder="身份证" readonly></el-input>
                </el-form-item>
            </template>
            <el-form-item class="btn">
                <template v-if="type !== 'info'">
                    <el-button type="primary" class="btn-success" @click="onSubmit">提交</el-button>
                    <el-button class="btn-close" @click="back()">取消</el-button>
                </template>
                <el-button v-else-if="type === 'info'" class="btn-close" @click="back()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
// 数字，邮件，手机，url，身份证校验
import { isNumber, isIntNumer, isEmail, isPhone, isMobile, isURL, checkIdCard } from '@/utils/validate';

export default {
    data() {
        let self = this;
        var validateIdCard = (rule, value, callback) => {
            if (!value) {
                callback();
            } else if (!checkIdCard(value)) {
                callback(new Error('请输入正确的身份证号码'));
            } else {
                callback();
            }
        };
        var validateUrl = (rule, value, callback) => {
            if (!value) {
                callback();
            } else if (!isURL(value)) {
                callback(new Error('请输入正确的URL地址'));
            } else {
                callback();
            }
        };
        var validateMobile = (rule, value, callback) => {
            if (!value) {
                callback();
            } else if (!isMobile(value)) {
                callback(new Error('请输入正确的手机号码'));
            } else {
                callback();
            }
        };
        var validatePhone = (rule, value, callback) => {
            if (!value) {
                callback();
            } else if (!isPhone(value)) {
                callback(new Error('请输入正确的电话号码'));
            } else {
                callback();
            }
        };
        var validateEmail = (rule, value, callback) => {
            if (!value) {
                callback();
            } else if (!isEmail(value)) {
                callback(new Error('请输入正确的邮箱地址'));
            } else {
                callback();
            }
        };
        var validateNumber = (rule, value, callback) => {
            if (!value) {
                callback();
            } else if (!isNumber(value)) {
                callback(new Error('请输入数字'));
            } else {
                callback();
            }
        };
        var validateIntNumber = (rule, value, callback) => {
            if (!value) {
                callback();
            } else if (!isIntNumer(value)) {
                callback(new Error('请输入整数'));
            } else {
                callback();
            }
        };
        return {
            id: '',
            type: '',

            ro: {
                yihugonghao: false,
                mima: false,
                yihuxingming: false,
                yihuxingbie: false,
                zhaopian: false,
                zhicheng: false,
                yihudengji: false,
                lianxidianhua: false,
                shenfenzheng: false,
            },

            ruleForm: {
                yihugonghao: '',
                mima: '',
                yihuxingming: '',
                yihuxingbie: '',
                zhaopian: '',
                zhicheng: '',
                yihudengji: '',
                lianxidianhua: '',
                shenfenzheng: '',
            },

            yihuxingbieOptions: [],
            yihudengjiOptions: [],

            rules: {
                yihugonghao: [{ required: true, message: '医护工号不能为空', trigger: 'blur' }],
                mima: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
                yihuxingming: [{ required: true, message: '医护姓名不能为空', trigger: 'blur' }],
                yihuxingbie: [],
                zhaopian: [],
                zhicheng: [],
                yihudengji: [],
                lianxidianhua: [{ validator: validateMobile, trigger: 'blur' }],
                shenfenzheng: [{ validator: validateIdCard, trigger: 'blur' }],
            },
        };
    },
    props: ['parent'],
    computed: {},
    components: {},
    created() {},
    methods: {
        // 下载
        download(file) {
            window.open(`${file}`);
        },
        // 初始化
        init(id, type) {
            if (id) {
                this.id = id;
                this.type = type;
            }
            if (this.type === 'info' || this.type === 'else') {
                this.info(id);
            } else if (this.type === 'logistics') {
                this.logistics = false;
                this.info(id);
            } else if (this.type === 'cross') {
                var obj = this.$storage.getObj('crossObj');
                for (var o in obj) {
                    if (o === 'yihugonghao') {
                        this.ruleForm.yihugonghao = obj[o];
                        this.ro.yihugonghao = true;
                        continue;
                    }
                    if (o === 'mima') {
                        this.ruleForm.mima = obj[o];
                        this.ro.mima = true;
                        continue;
                    }
                    if (o === 'yihuxingming') {
                        this.ruleForm.yihuxingming = obj[o];
                        this.ro.yihuxingming = true;
                        continue;
                    }
                    if (o === 'yihuxingbie') {
                        this.ruleForm.yihuxingbie = obj[o];
                        this.ro.yihuxingbie = true;
                        continue;
                    }
                    if (o === 'zhaopian') {
                        this.ruleForm.zhaopian = obj[o];
                        this.ro.zhaopian = true;
                        continue;
                    }
                    if (o === 'zhicheng') {
                        this.ruleForm.zhicheng = obj[o];
                        this.ro.zhicheng = true;
                        continue;
                    }
                    if (o === 'yihudengji') {
                        this.ruleForm.yihudengji = obj[o];
                        this.ro.yihudengji = true;
                        continue;
                    }
                    if (o === 'lianxidianhua') {
                        this.ruleForm.lianxidianhua = obj[o];
                        this.ro.lianxidianhua = true;
                        continue;
                    }
                    if (o === 'shenfenzheng') {
                        this.ruleForm.shenfenzheng = obj[o];
                        this.ro.shenfenzheng = true;
                        continue;
                    }
                }
            }

            // 获取用户信息
            this.$http({
                url: `${this.$storage.get('sessionTable')}/session`,
                method: 'get',
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    var json = data.data;
                } else {
                    this.$message.error(data.msg);
                }
            });

            this.yihuxingbieOptions = '男,女'.split(',');
            this.$http({
                url: `option/yihudengji/yihudengji`,
                method: 'get',
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.yihudengjiOptions = data.data;
                } else {
                    this.$message.error(data.msg);
                }
            });
        },
        // 多级联动参数

        info(id) {
            this.$http({
                url: `yihurenyuan/info/${id}`,
                method: 'get',
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.ruleForm = data.data;
                    //解决前台上传图片后台不显示的问题
                    let reg = new RegExp('../../../upload', 'g'); //g代表全部
                } else {
                    this.$message.error(data.msg);
                }
            });
        },

        // 提交
        onSubmit() {
            if (this.ruleForm.zhaopian !== null) {
                this.ruleForm.zhaopian = this.ruleForm.zhaopian.replace(new RegExp(this.$base.url, 'g'), '');
            }

            var objcross = this.$storage.getObj('crossObj');

            //更新跨表属性
            var crossuserid;
            var crossrefid;
            var crossoptnum;
            if (this.type === 'cross') {
                var statusColumnName = this.$storage.get('statusColumnName');
                var statusColumnValue = this.$storage.get('statusColumnValue');
                if (statusColumnName !== '') {
                    var obj = this.$storage.getObj('crossObj');
                    if (statusColumnName && !statusColumnName.startsWith('[')) {
                        for (var o in obj) {
                            if (o === statusColumnName) {
                                obj[o] = statusColumnValue;
                            }
                        }
                        var table = this.$storage.get('crossTable');
                        this.$http({
                            url: `${table}/update`,
                            method: 'post',
                            data: obj,
                        }).then(({ data }) => {});
                    } else {
                        crossuserid = this.$storage.get('userid');
                        crossrefid = obj['id'];
                        crossoptnum = this.$storage.get('statusColumnName');
                        crossoptnum = crossoptnum.replace(/\[/, '').replace(/\]/, '');
                    }
                }
            }
            this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    if (crossrefid && crossuserid) {
                        this.ruleForm.crossuserid = crossuserid;
                        this.ruleForm.crossrefid = crossrefid;
                        let params = {
                            page: 1,
                            limit: 10,
                            crossuserid: this.ruleForm.crossuserid,
                            crossrefid: this.ruleForm.crossrefid,
                        };
                        this.$http({
                            url: 'yihurenyuan/page',
                            method: 'get',
                            params: params,
                        }).then(({ data }) => {
                            if (data && data.code === 0) {
                                if (data.data.total >= crossoptnum) {
                                    this.$message.error(this.$storage.get('tips'));
                                    return false;
                                } else {
                                    this.$http({
                                        url: `yihurenyuan/${!this.ruleForm.id ? 'save' : 'update'}`,
                                        method: 'post',
                                        data: this.ruleForm,
                                    }).then(({ data }) => {
                                        if (data && data.code === 0) {
                                            this.$message({
                                                message: '操作成功',
                                                type: 'success',
                                                duration: 1500,
                                                onClose: () => {
                                                    this.parent.showFlag = true;
                                                    this.parent.addOrUpdateFlag = false;
                                                    this.parent.yihurenyuanCrossAddOrUpdateFlag = false;
                                                    this.parent.search();
                                                    this.parent.contentStyleChange();
                                                },
                                            });
                                        } else {
                                            this.$message.error(data.msg);
                                        }
                                    });
                                }
                            } else {
                            }
                        });
                    } else {
                        this.$http({
                            url: `yihurenyuan/${!this.ruleForm.id ? 'save' : 'update'}`,
                            method: 'post',
                            data: this.ruleForm,
                        }).then(({ data }) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {
                                        this.parent.showFlag = true;
                                        this.parent.addOrUpdateFlag = false;
                                        this.parent.yihurenyuanCrossAddOrUpdateFlag = false;
                                        this.parent.search();
                                        this.parent.contentStyleChange();
                                    },
                                });
                            } else {
                                this.$message.error(data.msg);
                            }
                        });
                    }
                }
            });
        },
        // 获取uuid
        getUUID() {
            return new Date().getTime();
        },
        // 返回
        back() {
            this.parent.showFlag = true;
            this.parent.addOrUpdateFlag = false;
            this.parent.yihurenyuanCrossAddOrUpdateFlag = false;
            this.parent.contentStyleChange();
        },
        zhaopianUploadChange(fileUrls) {
            this.ruleForm.zhaopian = fileUrls;
        },
    },
};
</script>

<style lang="scss" scoped></style>
